<html>
<head>
<script src='wz_jsgraphics.js' type='text/javascript'></script>
<script src='jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
    $(
        function()
        {
            chart=new jQueryChart('chartArea','line');
            chart.drawString("阿萨德减肥啦就是的",20,50,'center');
        }
    );
    function jQueryChart(div,type)
    {
        this.chart=new jsGraphics(div);
        //type will either be bar,pie,line
        this.type=type;
        //width&height
        this.width=400;
        this.height=300;
        $("#"+div).css('width',this.width);
        $("#"+div).css('height',this.height);
        this.setSize=function(w,h)
        {
            this.width=w;
            this.height=h;
            $("#"+div).css('width',this.width);
            $("#"+div).css('height',this.height);
        }
        //title
        this.title='普通图形';
        this.setTitle=function(t)
        {
            this.title=t;
        }
        //data
        this.data=new Array();//data will be an Array，eg.{[1,'1'],[2,'2'],[3,'3']}
        this.setData=function(d)
        {
            this.data=d;
            return this;
        }
        this.addData=function(num,text)
        {
           if(num instanceof Array)
            {
                this.data.push(num);
                return this;
            }
           this.data.push([num,text]);
           return this;
        }
        this.getData=function()
        {
            return this.data;
        }
        //fontSize,for caption text
        this.fontSize="13";
        this.chart.setFont('宋体',this.fontSize,Font.PLAIN);
        //colors
        this.colors = new Array();
        this.colors[0] = "#0066FF";
        this.colors[1] = "#FF6633";
        this.colors[2] = "#9900FF";
        this.colors[3] = "#FF0066";
        this.colors[4] = "#066600";
        this.colors[5] = "#006633";
        this.colors[6] = "#33FFFF";
        this.colors[7] = "#000000";
        this.colors[8] = "#FFFF00";
        this.colors[9] = "#000033";
        this.colors[10] = "#CCFFFF";
        this.colors[11] = "#666666";
        this.getNextColor=function(i)
        {
            return this.colors[i%this.colors.length];
        }
        this.calculateLength=function(str)
        {
            var count=0;
            for(var i=0;i<str.length;i++)
            {
                //若是中文，按两个字节算
                if(str.charAt(i)>='\u4e00'&&str.charAt(i)<='\u9fa5')
                    count+=2;
                else
                    count++;
            }
            return count;
        }
        //drawString,align will be left,right,bottom,top
        this.drawString=function(str,left,top,align)
        {
            var width=this.fontSize*this.calculateLength(str);
            width/=2;
            var left1=0,top1=0,width1=0;
            var space=5;
            var align1='';
            switch(align)
            {
                case 'left':
                {
                    if(left>width+space*2)
                    {
                        left1=left-width-space;
                        top1=top-fontSize/2
                        width1=width;
                    }
                    else
                    {
                        left1=space;
                        top1=top-fontSize;
                        width1=left-2*space;
                    }
                    align1='right';
                    break;
                }
                case 'right':
                {
                    if(this.width-left-width-space*2>0)
                    {
                        left1=left+space;
                        top1=top-topSize/2;
                        width1=width;
                    }
                    else
                    {
                        left1=left+space;
                        top1=top-topSize/2;
                        width1=this.width-left-space*2;
                    }
                    align1='left';
                    break;
                }
                case 'top':
                {
                    top1=top-space;
                    left1=left-width/2;
                    width1=width;
                    align1='center';
                    break;
                }
                case 'bottom':
                {
                    top1=top+space;
                    left1=left-width/2;
                    width1=width;
                    align1='center';
                    break;
                }
            }
            this.chart.drawStringRect(str,Math.round(left1),Math.round(top1),Math.round(width1),align1);
        }
        //draw
        this.draw=function()
        {
            this.chart.paint();
        }
       

       //line,pie,bar
       if(this.type=='bar')
       {
            
       }
       else if(this.type=='line')
       {
         
       }
       else if(this.type=='pie')
       {
            
       }

    }
</script>

</head>
<body> <div id='chartArea'> </div> </body> </html>
